<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考勤记录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no,address=no">
    <script src="js/mobile.js"></script>
    <link rel="stylesheet" href="css/m-common.css">
    <link rel="stylesheet" href="css/attendance-record.css">
</head>
<body>
<header class="header1">
    <a href="javascript:;" onclick="JavaScript:history.back(-1);"></a>
    考勤记录
</header>
<section>
    <div class="now"><b class="left"></b><span></span><b class="right"></b></div>
    <div class="calendar">
        <ul class="day">
            <li>日</li>
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li>六</li>
        </ul>
        <ol>
            <!--
            <li></li>
            <li><div>1</div><b></b></li>
            <li class="abnormal"><div>2</div><b></b></li>
            <li><div>3</div><b></b></li>
            <li><div>4</div><b></b></li>
            <li><div>5</div><b></b></li>
            -->
        </ol>
    </div>
    <div class="yc">
        <span class="greyThree">13:50</span>
        <span class="greySix">下班打卡</span>
        <span class="red">异常</span>
    </div>
    <div class="yc">
        <span class="greyThree">09:10</span>
        <span class="greySix">上班打卡</span>
        <span class="red">异常</span>
    </div>
</section>
<script src="js/jquery-1.11.3.js"></script>
<script>
    //获取当前时间
    var now=new Date();

    var year=now.getFullYear();

    var month=now.getMonth()+1;
    month<10?month='0'+month:month;

    var date=now.getDate();

    var day=now.getDay();
    var Ar=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    day=Ar[day];

    var str=year+'-'+month+'-'+date+' '+day;
    $('.now>span').text(str);

    //根据年份和月份，判断当前月第一天是星期几
    function getWeek(year,month){
        var d=new Date();
        d.setYear(year);
        d.setMonth(month-1);
        d.setDate(1);
        var weeks = [0,1,2,3,4,5,6];
        return weeks[d.getDay()];
    }


    //根据年份和月份，判断该月有多少天
    function getDays(year,month){
        month=parseInt(month,10);
        var temp=new Date(year,month,0);
        return temp.getDate();
    }


    function htmlAll() {
        //当前年，当前月的第一天
        var liNum=getWeek(year,month);
        //当前年，当前月有几天
        var num=getDays(year,month);
        var html='';
        for(var i=0;i<liNum;i++){
            html+='<li></li>';
        }
        for(var j=0;j<num;j++){
            html+=`<li><div>${j+1}</div><b></b></li>`;
        }
        $('.calendar>ol').html(html);
    }
    htmlAll(year,month);
    $('.calendar ol li').each(function(){
        if($(this).find('div').text()==date){
            $(this).find('div').addClass('first');
        }
    });


    $('.now>b.left').on('click',function () {
        if(month>1){
            month--;
            month<10?month='0'+month:month;
        }else{
            year--;
            month=12;
        }
        htmlAll(year,month);
        $('.calendar div:first').addClass('first');


        day=getWeek(year,month);
        day=Ar[day];
        str=year+'-'+month+'-'+'01'+' '+day;
        $('.now>span').text(str);


        clickDate();
    });
    $('.now>b.right').on('click',function () {
        if(month<12){
            month++;
            month<10?month='0'+month:month;
        }else{
            year++;
            month='01';
        }
        htmlAll(year,month);
        $('.calendar div:first').addClass('first');


        day=getWeek(year,month);
        day=Ar[day];
        str=year+'-'+month+'-'+'01'+' '+day;
        $('.now>span').text(str);


        clickDate();
    });

    //点击日期
    function clickDate() {
        $('.calendar>ol>li').on('click',function () {
            if($(this).children('div').length!=0){//当前li下面有div
                $('.calendar>ol>li>div').removeClass('first');
                $(this).children('div').addClass('first');
                date=$(this).children('div').text();
                day=new Date(year+'/'+month+'/'+date).getDay();
                day=Ar[day];
                date<10?date='0'+date:date;
                str=year+'-'+month+'-'+date+' '+day;
                $('.now>span').text(str);
            }
        });
    }
    clickDate();

</script>
</body>
</html>